<template>
  <div :class="{'main':true, 
    '': activeList[0],
    'homepage': activeList[1],
    'marketplace': activeList[2],
    'dex': activeList[3],
    'banking': activeList[4],
    'about': activeList[5],
    'blog': activeList[6],
    'contact': activeList[7],
    'article': activeList[8],
    'listing': activeList[9],
    'property': activeList[10],
    'property-detail': activeList[11]
    }">
    
    <div class="topbar" v-if="landing < 9">
      <topbar1 :toli="landing"></topbar1>
    </div>
    <div class="listing-top" v-if="landing> 8">
      <listing-topbar :toli="landing"></listing-topbar>
    </div>
    <!-- <div class="home-content"></div> -->
    <div v-show="false" class="lbt" v-if="landing==1">
      <!-- <lbt1></lbt1> -->
    </div>
    <div class="content" v-if="landing==1">
      <homecontent></homecontent>
    </div>
    <div v-if="landing==2">
      <marketplace></marketplace>
    </div>
    <div v-if="landing==3">
      <dex></dex>
    </div>
    <div v-if="landing==4">
      <banking></banking>
    </div>
    <div v-if="landing==5">
      <about></about>
    </div>
    <div v-if="landing==6">
      <blog></blog>
    </div>
    <div v-if="landing==7">
      <contact></contact>
    </div>
    <div v-if="landing==8">
      <article-detail></article-detail>
    </div>
    <div v-if="landing==9">
      <listing></listing>
    </div>
    <div v-if="landing==10">
      <property></property>
    </div>
    <div v-if="landing==11">
      <property-detail></property-detail>
    </div>
    <div class="bottombar" v-if="landing < 9">
      <bottombar></bottombar>
    </div>

  </div>
</template>

<script>
  import homecontent from './homecontent'
  import topbar1 from './topbar1'
  import listingTopbar from './listing_topbar'
  // import lbt1 from './lbt'
  import bottombar from './bottombar'
  import about from './about'
  // import product1 from './product'
  // import contact1 from './contact'
  // import member from './reg'
  import marketplace from './marketplace'
  import dex from './dex'
  import banking from './banking'
  import blog from './blog'
  import articleDetail from './article'
  import contact from './contact'
  import listing from './listing'
  import property from './property'
  import propertyDetail from './propertyDetail'
  export default {
    data() {
      return {
        landing: 1,
        activeList: Array(12).fill(false),
        routes: [
          '/', 
          '/homepage', 
          '/marketplace', 
          '/dex', 
          '/banking', 
          '/about', 
          '/blog', 
          '/contact', 
          '/article',
          '/listing',
          '/property',
          '/propertyDetail'
          ]
      }
    },
    mounted() {
      this.getreg()
      this.landing = this.routes.indexOf(this.$route.path)
      // Bus.routes = this.routes
      this.gettop()
      // document.querySelector('.listing').style.heigth = innerHeight
      window.onhashchange = hash => {
        // Bus.$emit('topbar', this.routes.indexOf(hash.newURL.split('#')[1]))
        window.location.reload()
      }
      /**
       * window.onpopstate = sta => {
          Bus.$emit('topbar', this.routes.indexOf(location.hash.replace('#','')))
        }
       */
      // document.title = innerWidth
    },
    methods: {
      gettop() {
        this.setProp(this.landing, this.routes[1])
        Bus.$on('topbar', r => {
          /*console.log('topbar:', r)
          if(r[0]) {
            r = r[0]
            location.hash = location.hash.replace(/\?id=\d{1,}/g, '') + '?id=' + r[1]
          }*/
          const matHash = location.hash.match(/\w+/),
                _hash = matHash && matHash[0] || ''
          if(`/${_hash}` === this.routes[r]) return
          this.landing = r
          this.setProp(r, this.routes[r])
          this.$router.push({ path: this.routes[r] })
          // console.log('r:', r, this.$route)
        })
      },
      setProp(n, path) {
        // let module = this.routes[n]
        this.activeList = this.activeList.map(m => false)
        console.log(n, path)
        // if(n-6 < 0) return
        this.activeList[n] = true
        // console.log(this.activeList, n, path, this.routes.indexOf(path))
        /*switch(module) {
          case '/blog' :
            break
        }*/
      },
      getreg() {
        Bus.$on('go-reg', r => {
          this.landing = r
        })
      }
    },
    components: {
      topbar1,
      listingTopbar,
      // lbt1,
      bottombar,
      homecontent,
      marketplace,
      dex,
      banking,
      about,
      blog,
      articleDetail,
      contact,
      listing,
      property,
      propertyDetail
    },
  }
</script>
<style lang="scss" scoped>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* user-select: none; */
    font-family: PingFang-Sem !important;
  }

  .main{
    overflow: hidden;
    width: 100%;
    text-align: center;
    .bottombar{
      color: #fff;
      .bottom{
        .list{
        }
        .footer{
          a{
            color: #fff;
          }
        }
      }
    }
    &.listing{
      background: url(../assets/listing_home.jpeg) no-repeat;
      background-size: 100% auto;
      height: 100vh;
      .bottombar{
        // visibility: hidden;
        // display: none;
      }
    }
    &.blog, &.article, &.contact, &.property, &.property-detail{
      &.article{
        background: #fff;
        .logo{
        }
      }
      // &.property, &.property-detail{
      &.property{
        background: #F6F5F5;
        .logo{
        }
      }
      .bottombar{
        background: #F6F5F5;
        color: #2C2C2C;
        .bottom{
          .list{
          }
          .footer{
            a{
              color: #2C2C2C;
            }
          }
        }
      }
    }
  }
  // .topbar {
  //   /* width: 1920px; */
  //   // height: 50px;
  //   margin-bottom: 10px;
  //   overflow-y: hidden;
  //   display: inline-block;
  // }

  .content {
    /* margin-top: -40px; */
    /* width: 100%; */
    /* overflow-x: hidden; */
    position: relative;
    text-align: center;
  }

  .bottombar {
    /* overflow-x: hidden; */
  }

  .linshi {
    text-align: center;
    line-height: 600px;
    height: 600px;
  }
</style>
